<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
      .active {
        background-color: red;
      }
      .style {
        font-style: italic;
      }
      .yellow {
        color: yellow;
      }
    </style>
  </head>

  <body>
    <!-- 
      v-bind强制绑定
        * 基础使用
          - `v-bind`:vue中提供的用于对模板中的属性进行强制绑定的指令
          - `v-bind`指令后的属性值区域就是插值语法区域
          - `v-bind:attr="xxx"`:给attr属性强制绑定xxx数据
          - `v-bind`可以简写为一个 :(冒号),比如`:attr="xxx"`
        * 动态类名:写法为: :class="xxx" xxx可以是字符串、对象、数组。
          - 字符串写法适用于：类名不确定是否添加,可以使用三元判断控制展示的是哪些字符串格式的类名


     -->
    <div id="app">
      <button @click="isActive=!isActive">change isActive</button>
      <button @click="isStyle=!isStyle">change isStyle</button>
      <button @click="isYellow=!isYellow">change isYellow</button>

      <div :class="{active:isActive,style:isStyle,yellow:isYellow}">
        class动态绑定-字符串类名只有一个
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            isActive: false,
            isStyle: false,
            isYellow: false,
          };
        },
      });
    </script>
  </body>
</html>
